<template>
  <div class="onLineMall">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <SwipePage :images="images" />
      <GridPage :merchantType="merchantType" />
      <MerchantList title="优选附近的商户" :list="list" />
    </van-list>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SwipePage from "@/components/SwipePage.vue";
import GridPage from "@/components/GridPage.vue";
import MerchantList from "@/components/MerchantList.vue";

import { List } from "vant";
Vue.use(List);
@Component({
  components: {
    SwipePage,
    GridPage,
    MerchantList,
  },
})
export default class OnLineMall extends Vue {
  private images: any[] = [require("@/assets/img/banner.png")];
  private list: number[] = [];
  private merchantType: any[] = [];
  private loading: boolean = false;
  private finished: boolean = false;
  private form = {
    lat: "",
    lon: "",
    order: 1,
    typeId: 0,
    page: 1,
    size: 20,
  };
  private mounted() {
    this.getMerchantType();
  }
  private onLoad() {
    this.$common.setWxConfig(window.location.href).then((res: boolean) => {
      if (res) {
        this.$common.getAuthToken(this.getLocation);
      }
    });
  }
  private getMerchantType() {
    this.$post(`merchantType`, this.form).then((res: any) => {
      if (res.code == 0) {
        var result = [];
        for (var i = 0; i < res.data.length; i += 16) {
          result.push(res.data.slice(i, i + 16));
        }
        this.merchantType = result;
      }
    });
  }
  private getLocation() {
    let that = this;
    if (this.$common.getLocation("location") == null) {
      that.$wx.ready(function () {
        that.$wx.getLocation({
          type: "wgs84",
          success: function (res: any) {
            that.$common.setLocation(
              JSON.stringify({
                latitude: res.latitude,
                longitude: res.longitude,
              })
            );
            that.getData();
          },
        });
      });
    } else {
      this.getData();
    }
  }
  private getData() {
    let location = JSON.parse(this.$common.getLocation());
    this.form.lat = location.latitude.toString();
    this.form.lon = location.longitude.toString();
    this.$post("nearbyMerchant", this.form).then((res: any) => {
      if (res.code == 0) {
        this.loading = false;
        this.list = this.list.concat(res.data.list);
        this.form.page += 1;
        if (res.data.list.length < 20) {
          this.finished = true;
        }
      }
    });
  }
}
</script>
<style lang="scss" scoped>
</style>
